<!-- CategoryPage.vue -->
<template>
    <q-page padding>
      <div class="text-h5 q-mb-md">分类页面</div>
      
      <q-card>
        <q-card-section>
          <div class="text-subtitle2 q-mb-sm">页面状态测试</div>
          <q-input 
            v-model="categorySearch" 
            outlined 
            label="搜索分类"
            hint="输入内容测试状态保持"
          />
          <div class="q-mt-md">
            <div class="text-body2">onMounted次数: {{ mountCount }}</div>
            <div class="text-body2">onActivated次数: {{ activatedCount }}</div>
            <div class="text-body2">当前时间: {{ currentTime }}</div>
          </div>
        </q-card-section>
      </q-card>
    </q-page>
  </template>
  
  <script setup>
  import { ref, onMounted, onActivated } from 'vue'
  
  defineOptions({
    name: 'CategoryPage'
  })
  
  const categorySearch = ref('')
  const mountCount = ref(0)
  const activatedCount = ref(0)
  const currentTime = ref('')
  
  const updateTime = () => {
    currentTime.value = new Date().toLocaleTimeString()
  }
  
  onMounted(() => {
    mountCount.value++
    console.log('🔵 CategoryPage onMounted - 第', mountCount.value, '次')
    updateTime()
  })
  
  onActivated(() => {
    activatedCount.value++
    console.log('🟢 CategoryPage onActivated - 第', activatedCount.value, '次')
    updateTime() // 只更新时间显示
  })
  </script>
